<!DOCTYPE html>
<html>
<head>
	<title>编辑项目</title>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="/css/materialize.min.css"  media="screen,projection"/>
  <style type="text/css">
  	.report-add{
  		margin-top: 1rem;
  	}
  	.warning-totast{
  		border-radius:8px;
  		background-color: #ee6e73;
  		position: fixed;
  		width: 50%;
  		left: 25%;
  		margin-top: 50%;
  	}
  	.item-add{
  		position: fixed;
  		right: 10px;
  		bottom: 10px;
  	}
  </style>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
	<nav style="background-color: #26a69a;">
    <div class="nav-wrapper">
      <a href="/" class="brand-logo right"><img src="<?=$user['avatar']?>" alt="" style="width: 40px;vertical-align: text-top;" class="circle responsive-img"></a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="sidenav" id="mobile-demo">
	    <li><a href="/users">员工</a></li>
	    <li><a href="/projects">项目</a></li>
	    <li><a href="/report">上报</a></li>
	    
	  </ul>
    </div>
  </nav>
   
	<div class="container">


	  <div class="row report-add">
	    <form class="col s12">
	      <div class="row">
	        <div class="input-field col s12">
	          <input value="<?=$item['name']??''?>" id="name" type="text" class="validate" required>
	          <label for="name">项目名称</label>
	          <input type="hidden" id="id" value="<?=$item['id']??''?>">
	        </div>
	      </div>
	      <div class="row">
	        <div class="switch">
				    <label>	
				    	禁用			      
				      <input type="checkbox" <?=$item['status']?'checked':''?> id="status">
				      <span class="lever"></span>
				      启用
				    </label>
				  </div>
	      </div>
	      <!-- <div class="row">
	        <div class="input-field col s12">
	          <select>
			      <option value="" disabled selected>Choose your option</option>
			      <option value="1">Option 1</option>
			      <option value="2">Option 2</option>
			      <option value="3">Option 3</option>
			    </select>
			    <label>Materialize Select</label>
	        </div>
	      </div> -->
	       <div class="row" style="text-align: center;">
	       	<button class="btn waves-effect waves-light" onclick="return editUser();" type="button" name="action">保存
    <i class="material-icons right">edit</i>
  </button>
	       </div>
	    </form>
		  
	  </div>
        






       
    </div>

	

  <!--JavaScript at end of body for optimized loading-->
  <script type="text/javascript" src="/js/materialize.min.js"></script>
  <script type="text/javascript">
  	function M_info(msg,url=''){
  		let s = '';
  		if(url){
  			s = "M_success";
  		}
  		M.toast({html:msg, classes: 'warning-totast '+s,displayLength:2000});
  		if(url){
  			setTimeout(()=>{
  				window.location.href = url;
  			},2000);
  		}
  	}

  	function editUser() {
  		let base =  new FormData();
  		base.append('id',document.querySelector('#id').value);
  		base.append('name',document.querySelector('#name').value);
  		base.append('status',document.querySelector('#status').checked?1:0);
  		if(!base.get('name')){
  			M_info('请输入名称!');
  			return false;
  		}
  		
  		fetch('/projects/edit', {
		    method: 'post',
		    body: base,
		  }).then(function(data) {
		 		M_info('操作成功','/projects');
		  })
  	}


  	document.addEventListener('DOMContentLoaded', function() {
	    var elems = document.querySelectorAll('.sidenav');
	    var instances = M.Sidenav.init(elems, []);
	    // M.Collapsible.init(document.querySelector('.collapsible'));
	    M.FormSelect.init(document.querySelectorAll('select'));
	    M.Datepicker.init(document.querySelectorAll('.datepicker'),{format:'yyyy-mm-dd',
	    	maxDate: new Date(),
	    	defaultDate: new Date(),
	    	setDefaultDate:true,
	    	showClearBtn:true,
	    	autoClose:true,
	    	i18n:{
      cancel: '取消',
      clear: '清除',
      done: '确认',
      previousMonth: '‹',
      nextMonth: '›',
      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      monthsShort:  ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      weekdaysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      weekdaysAbbrev: ['日', '一', '二', '三', '四', '五', '六'], 
    }});
	  });
  </script>
</body>
</html>